<template>
<div id="background">
        <div id="positionHead">
            <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1"  class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col  :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                        <span class="titleSize" >位置</span>
                    </el-col>
            </el-row>
        </div>
        <div style="backgroundColor:#ffffff;height:50px" class="imgCol">
                <el-row>
                    <i class="el-icon-location-information" style="color:#53cdf5"></i>
                    <span>选择城市：{{city}}</span>
                </el-row>
        </div>
        <van-index-bar highlight-color="#53cdf5" :index-list="indexList">
                <div v-for="cityData in cityDatas" v-bind:key="cityData.name">
                    <van-index-anchor :index="cityData.name" />
                    <div v-for="city in cityData.cities" v-bind:key="city.cityid">
                        <van-cell :title="city.name" />
                    </div>
                </div>
        </van-index-bar>
</div>
</template>
<script>
import cityData from '../common/city'
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
export default {
    data(){
        return{
             backIcon:backIcon,
            cityDatas:cityData.cityData,
            city:'杭州市',
             indexList:['热门','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'],
        }
 
    },
    mounted(){
        var normalHeight=sessionStorage.getItem('normalHeight');
    
        var head=document.getElementById("positionHead");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
    }
}
</script>

<style>
.el-main,.el-footer,.el-header{
    padding: 0px;
}

#positionHead{
    background-color: #53cdf5
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-width: 340px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
